<template>
  <div>
    <div class="index-wrap">
      <!--左-->
      <div class="index-left">
        <div class="index-left-block">
          <h2>全部产品</h2>
          <div v-for="(product, index) of productlist" :key="index">
            <h3>{{product.title}}</h3>
            <ul>
              <li v-for="(item, key) of product.list" :key="key">
                <a :href="item.url">{{item.name}}</a>
                <span v-if="item.hot" class="hot-tag">hot</span>
              </li>
            </ul>
            <div v-if="!product.last" class="hr"></div>
          </div>
        </div>
        <div class="index-left-block lastest-news">
          <h2>最新消息</h2>
          <ul style="padding-top: 0">
            <li v-for="(item, index) of newslist" :key="index">
              <a :href="item.url" class="new-item">{{item.name}}</a>
              <span v-if="item.hot" class="hot-tag">hot</span>
            </li>
          </ul>
        </div>
      </div>
      <!--右-->
      <div class="index-right">
        <home-swiper :swiperlist="swiperList"></home-swiper>
        <div class="index-board-list">
          <div
            class="index-board-item"
            v-for="(item, index) in boardlist"
            :key="index"
            :class="[{'line-last' : index % 2 !== 0}, 'index-board-' + item.id]"
          >
            <div class="index-board-item-inner" >
              <h2>{{ item.title }}</h2>
              <p>{{ item.description }}</p>
              <div class="index-board-button">
                <router-link class="button" :to="{path: 'detail/' + item.toKey}">立即购买</router-link>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import HomeSwiper from './Swiper'
import axios from 'axios'
export default {
  name: 'HomeContent',
  components: {
    HomeSwiper
  },
  data () {
    return {
      swiperList: []
    }
  },
  props: {
    productlist: Object,
    newslist: Array,
    boardlist: Array
  },
  methods: {
    getSwiper () {
      axios.get('/app/list')
        .then(this.handleGetSwiper)
    },
    handleGetSwiper (res) {
      console.log(res)
      res = res.data
      if (res) {
        this.swiperList = res.swiperList
      }
    }
  },
  mounted () {
    this.getSwiper()
  }
}
</script>

<style scoped lang="stylus">
  .index-wrap {
    width: 1200px;
    margin: 0 auto;
  }
  .index-left {
    float: left;
    width: 300px;
    text-align: left;
  }
  .index-right {
    float: left;
    width: 900px;
  }
  .index-left-block {
    margin: 15px;
    background: #fff;
    box-shadow: 0 0 1px #ddd;
  }
  .index-left-block .hr {
    margin-bottom: 20px;
    border-bottom 1px solid #A5A5A5
  }
  .index-left-block h2 {
    background: #4fc08d;
    color: #fff;
    padding: 10px 15px;
    margin-bottom: 20px;
  }
  .index-left-block h3 {
    padding: 0 15px 5px 15px;
    font-weight: bold;
    color: #222;
  }
  .index-left-block ul {
    padding: 10px 15px;
  }
  .index-left-block li {
    padding: 5px;
  }
  .index-left-block li a{
    color: #000
  }
  .index-board-list {
    overflow: hidden;
  }
  .index-board-item {
    float: left;
    width: 400px;
    background: #fff;
    box-shadow: 0 0 1px #ddd;
    padding: 20px;
    margin-right: 20px;
    margin-bottom: 20px;
  }
  .index-board-item-inner {
    min-height: 125px;
    padding-left: 120px;
  }
  .index-board-car .index-board-item-inner{
    background: url(../../../assets/images/1.png) no-repeat;
  }
  .index-board-loud .index-board-item-inner{
    background: url(../../../assets/images/2.png) no-repeat;
  }
  .index-board-earth .index-board-item-inner{
    background: url(../../../assets/images/3.png) no-repeat;
  }
  .index-board-hill .index-board-item-inner{
    background: url(../../../assets/images/4.png) no-repeat;
  }
  .index-board-item h2 {
    font-size: 18px;
    font-weight: bold;
    color: #000;
    margin-bottom: 15px;
  }
  .line-last {
    margin-right: 0;
  }
  .index-board-button {
    margin-top: 20px;
  }
  .lastest-news {
    min-height: 512px;
  }
  .hot-tag {
    background: red;
    color: #fff;
    padding 2px;
    float: right;
    margin-top: -2px;
  }
  .new-item {
    display: inline-block;
    width: 200px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .button{
    background #4BBE8D
    padding 6px 15px
    color white
  }
</style>
